import React,{ useState } from 'react'
import './zagly.css'
import { Input,Button,Table,Modal } from 'antd'
import xzjh from '../../../static/images/xzjh.png'

export default function ZQGLY() {
  let arr = [
    {
      kehu:'北京西天取经科技有限公司',
      add:'俊豪中央广场A座',
      name:'张三',
      tel:'18888888888',
      email:'xx@qq.com'
    },
    {
      kehu:'北京西天取经科技有限公司',
      add:'俊豪中央广场A座',
      name:'张三',
      tel:'18888888888',
      email:'xx@qq.com'
    },
    {
      kehu:'北京西天取经科技有限公司',
      add:'俊豪中央广场A座',
      name:'张三',
      tel:'18888888888',
      email:'xx@qq.com'
    },
    {
      kehu:'北京西天取经科技有限公司',
      add:'俊豪中央广场A座',
      name:'张三',
      tel:'18888888888',
      email:'xx@qq.com'
    }
  ]
  let col = [
    {
      title:'客户名称',
      key:'kehu',
      dataIndex:'kehu'
    },
    {
      title:'租住楼宇',
      key:'add',
      dataIndex:'add'
    },
    {
      title:'管理员',
      key:'name',
      dataIndex:'name'
    },
    {
      title:'管理员手机号',
      key:'tel',
      dataIndex:'tel'
    },
    {
      title:'管理员邮箱',
      key:'email',
      dataIndex:'email'
    }
    ,
    {
      title:'操作',
      key:'poa',
      dataIndex:'poa',
      render(_,recode){
        return <div> <p style={{color:'#8479E3',cursor:'pointer'}} onClick={showModal}>设置管理员</p>

        </div>
      }
    }
  ]
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <>
      <p className='tit'>租期管理员</p>
      <div className="wp">
        <Input style={{width:'348px',height:'32px',background: '#F8FBFF',border:'1px solid #E1E8EE',borderRadius: '2px',margin:'1.5% 0 1.5% 1.5%'}} placeholder='请输入客户名称'/>
        <div className="t1">
          <span>管理员姓名或手机号</span>
          <Input style={{background: '#F8FBFF',border:'1px solid #E1E8EE',borderRadius: '2px',width:'200px',height:'28px'}}/>
        </div>
        <div className="t2">
          <span>管理员姓名或手机号</span>
          <div>
            <input type="checkbox" />
            <span>已设置</span>
            <input type="checkbox" />
            <span>未设置</span>
          </div>
        </div>
        <div className="shouqi">
          <span></span>
          <div>
              <img src={xzjh} alt="" />
              <p>收起筛选</p>
          </div>
        </div>
        <div className="mid-bot">
          <Button type='primary' style={{background:'#8479E3'}}>查询</Button>
          <Button type='primary' style={{background:'#f1f0f9',color:'#999cb2'}}>重置</Button>
        </div>
      </div>
      <div className="wp2">
        <Table style={{margin:'1.5% auto'}} dataSource={arr} columns={col}/>
      </div>
      <Modal style={{height:'297px',width:'480px',display:'flex',justifyContent:'center'}} title="设置租期管理员" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
            <div style={{width:'432px',display:'flex',borderTop:'1px #ccc solid',justifyContent:'space-between'}}>
              <div style={{width:'216px',margin:'3% 0'}}>
                <p style={{marginTop:'2%'}}>
                  <span style={{color:'#f00',marginRight:'1.5%'}}>*</span>
                  <span style={{color:'#999',fontSize:'14px'}}>管理员姓名</span>
                </p>
                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人姓名'/>
                <span style={{marginTop:'5%',color:'#999',fontSize:'14px',display:'block'}}>管理员邮箱</span>
                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人邮箱'/>
              </div>
              <div style={{width:'216px',margin:'3% 0'}}>
                <p style={{marginTop:'2%'}}>
                  <span style={{color:'#f00',marginRight:'1.5%'}}>*</span>
                  <span style={{color:'#999',fontSize:'14px'}}>管理员姓名</span>
                </p>
                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人姓名'/>
                <span style={{marginTop:'5%',color:'#999',fontSize:'14px',display:'block'}}>管理员邮箱</span>
                <Input style={{marginTop:'3%',width:'206px',height:'36px',borderRadius:'2px',fontSize:'12px',backgroundColor:'#F8FBFF'}} placeholder='请输入联系人邮箱'/>
              </div>
            </div>
            <div style={{marginTop:'2%',width:'260px',display:'flex',justifyContent:'space-between',margin:'0 auto'}}>
              <Button style={{width:'120px',background:'#8479E3',color:'#fff' }} onClick={handleOk}>确定</Button>
              <Button style={{width:'120px',background:'#F0F1F9',color:'#666'}} onClick={handleCancel}>取消</Button>
            </div>
      </Modal>
    </>
  )
}
